<template>
  <div id="wangEditor">
    <div id="toolbar-container" style="z-index:20;" class="toolbar" />
    <div id="text-container" style="z-index:0;" class="text_container" />
  </div>
</template>
<script>
import Wangeditor from 'wangeditor'
import { getToken } from '@/utils/auth'
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    isClear: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      editor: ''
    }
  },
  watch: {
    isClear(val) {
      // 触发清除文本域内容
      if (val) {
        this.editor.txt.clear()
        this.info_ = null
      }
    },
    value(value) {
      if (value !== this.editor.txt.html()) {
        this.editor.txt.html(this.value)
      }
    }
    // value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
  },
  mounted() {
    const _this = this
    // eslint-disable-next-line no-undef
    _this.editor = new Wangeditor('#toolbar-container', '#text-container')
    // eslint-disable-next-line space-before-function-paren
    _this.editor.config.onchange = function (html) {
      _this.$emit('geteditor', html)
    }
    _this.editor.config.menus = [
      'head', // 标题
      'bold', // 粗体
      'fontSize', // 字号
      'fontName', // 字体
      'italic', // 斜体
      'underline', // 下划线
      'strikeThrough', // 删除线
      'foreColor', // 文字颜色
      'backColor', // 背景颜色
      'link', // 插入链接
      'list', // 列表
      'justify', // 对齐方式
      'quote', // 引用
      'emoticon', // 表情
      'image', // 插入图片
      'table', // 表格
      'video', // 插入视频
      'code', // 插入代码
      'undo', // 撤销
      'redo', // 重复
      'fullscreen' // 全屏
    ]
    _this.editor.config.onchangeTimeout = 500
    _this.editor.config.uploadImgServer = '/knowledge/web/file_action/upload'
    _this.editor.config.uploadImgMaxSize = 5 * 1024 * 1024 // 2M
    _this.editor.config.uploadImgMaxLength = 1
    _this.editor.config.uploadFileName = 'file'
    _this.editor.config.uploadImgHeaders = {
      'x-auth-token': getToken()
    }
    _this.editor.config.uploadImgHooks = {
      // 上传图片之前
      before() {
        // 可阻止图片上传
      },
      // 图片上传并返回了结果，图片插入已成功
      success(xhr) {
        console.log('success', xhr)
      },
      // 图片上传并返回了结果，但图片插入时出错了
      fail(xhr, editor, resData) {
        console.log('fail', resData)
      },
      // 上传图片出错，一般为 http 请求的错误
      error(xhr, editor, resData) {
        console.log('error', xhr, resData)
      },
      // 上传图片超时
      timeout(xhr) {
        console.log(xhr)
      },
      customInsert(insertImgFn, result) {
        insertImgFn('/image/' + result.data[0].uuidFileName)
      }
    }
    this.editor.create()
  },
  beforeDestroy() {
    // 销毁编辑器
    this.editor.destroy()
    this.editor = null
  }
}
</script>
<style lang="scss" scope>
#wangEditor {
  min-height: 400px;
  width: 100%;
}
.toolbar {
  //height: 45px;
  border: 1px solid #ccc;
  position: relative;
}
.text_container {
  min-height: 345px;
  position: relative;
}
</style>
